<!--<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#main{
		width: 800px;
		height: 600px;
	}
</style>
<!-- 引入echarts函数库 -->
<script type="text/javascript" src="bootstrap/js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="bootstrap/js/echarts.min.js"></script>
</head>
<body>
	<div id="main"></div>
	<script type="text/javascript">
		//发送请求,获取各种类型资产的个数
		$.ajax({
			type:'post',//请求的类型
			async:false,//同步
			url:'prdServlet?flag=prdTypesRate',//请求
			data:{},//无参数
			dataType:'json',//返回数据格式是json对象
			success:function(data){
				//判断data不为空的情况下
				if(data){
					//调用bind
					bind(data);
				}
			}
		});
		//将准备的data数据,加载饼图
		function bind(graphData) {
			//基于准备好的dom，初始化echarts图表
			var myChart= echarts.init(document.getElementById("main"));
			//设置选项
			var option={
					tooltip:{
						trigger:'item',//将每一种状态的资产都触发
						formatter:"{a}<br/>{b}:{c}({d}%)" //a:系列名;b:数据名(类型名称);c:数据值;d:百分比
					},
					legend:{//系列的标记
						orient:'horizontal',//布局朝向
						x:'left',//标记靠左还是靠右
						data:(function() { //提供标记数据(各种资产类型名称)
							//声明一个数组,存储各种资产类型名称
							var res=[];
							////遍历graphData
							for (var int = 0; int < graphData.length; int++) {
								//将当前资产类型压入res
								res.push({name:graphData[int].asState});
							}
							//返回
							return res;
						})()
					},
					//系列
					series:[{
						name:'各种资产的占比',//系列名
						type:'pie',//图形类型
						radius:'90%',//饼图外半径
						center:['50%','50%'],//中心的坐标
						data:(function() {
							//存储各种资产类型信息(类型名称,个数)
							var res=[];
							//遍历graphData
							for (var int = 0; int < graphData.length; int++) {
								res.push({
									//将当前类型的名称及个数放入拼图中
									name:graphData[int].asState,
									value:graphData[int].asNum
								})
							}
							return res;
						})()
					}
					]
			};
			//设置选项
			myChart.setOption(option);
		};
	</script>
</body>
</html>